<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>V2兄弟组件传值</title>
</head>
<body>
  <div id="app">
    <my-content></my-content>
    <my-footer></my-footer>
  </div>
</body>
<template id="content">
  <div>
    {{ type }}
  </div>
</template>
<template id="footer">
  <div>
    <button @click="changeType('首页')">首页</button>
    <button @click="changeType('分类')">分类</button>
    <button @click="changeType('购物车')">购物车</button>
    <button @click="changeType('我的')">我的</button>
  </div>
</template>
<script src="../lib/vue.js"></script>
<script>

  new Vue({
    el: '#app',
    data: {

    }, 
    components: {
      MyContent: {
        template: '#content',
        data () { // vue2 中 组件中的data必须为函数
          return {
            type: '首页'
          }
        },
        mounted () {
          bus.$on('my-event', (type) => {
            this.type = type
          })
        }
      },
      MyFooter: {
        template: '#footer',
        methods: {
          changeType (type) {
            bus.$emit('my-event', type)
          }
        }
      }
    }
  })
</script>
</html>